<template>
	<view>
		<ABanner :highLight="highLight" @sendNum="handleTab" :menuList="['我的关注','我的粉丝']"></ABanner>
		<view class="content">
			<view v-if="showList.list.length>0" class="attention-item" :key='index' v-for="(item,index) in showList.list">
				<view class="user" @click="handleUSer">
					<view class="img">
						<img :src="item.avatar" alt="" />
					</view>
					<view class="detail">
						<view class="name">
							{{item.nickname}}
						</view>
						<view class="mark">
							{{item.mark}}
						</view>
					</view>
				</view>
				<view class="attention">
					<button @click="handleClick(item,false)" v-if="attentionsIds.indexOf(item.uid)!=-1"
						class="btn">已关注</button>
					<button @click="handleClick(item,true)" v-else class="btn red">未关注</button>

				</view>
			</view>
			<view v-if="showList.list.length==0" class="empty_container">
				<u-empty :text="wutext" mode="data" width="100%" iconSize="60" textSize="32"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAttentionList,
		getFansList,
		followUser
	} from '../../../api/follow'
	export default {
		data() {
			return {
				attentions: {
					list: [],
					total: 0
				},
				fans: {
					list: [],
					total: 0
				},
				showList: {
					list: []
				},
				highLight: 0
			}
		},
		methods: {
			handleTab(v) {
				this.highLight = v
				this.showList.list = this.highLight == 0 ? this.attentions.list : this.fans.list
			},
			handleClick(item, flag) {
				followUser({
					uid: item.uid,
					flag
				}).then(res => {
					uni.showToast({
						title: res.message
					})
					this.getList()
				})
			},
			getList() {
				getAttentionList().then(res => {
					this.attentions.list = res.data
					this.showList.list = this.highLight == 0 ? this.attentions.list : this.fans.list
				})
				getFansList().then(res => {
					this.fans.list = res.data
					this.showList.list = this.highLight == 0 ? this.attentions.list : this.fans.list
				})
			}
		},
		computed: {
			attentionsIds() {
				return this.attentions.list.map(i => {
					return i.uid
				})
			},
			wutext(){
				return "暂无"+(this.highLight==0?"关注":"粉丝")
			}
		},
		onLoad(option) {
			this.getList()
			this.highLight = option.tap
		}
	}
</script>

<style lang="scss">
	.content{
		margin-top: -70rpx;
	}
	.attention-item {
		display: flex;
		padding: 20rpx;
		justify-content: space-between;
		background-color: #fff;

		.user {
			display: flex;

			.img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.detail {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 36rpx;
				}

				.mark {
					color: #c5c5c5;
				}
			}
		}

		.attention {
			display: flex;
			align-items: center;

			button {
				color: #c5c5c5;
				height: 63rpx;
				font-size: 34rpx;
				padding: 9rpx;
				border-radius: 43rpx;
				border: 1rpx solid #bfbfbf;
				width: 145rpx;
			}

			.more {
				margin-left: 22rpx;
				font-size: 40rpx;
				color: #c5c5c5;
			}

			.red {
				color: #faa094;
				border: 1rpx solid #faa094;
			}
		}
	}

		
.empty_container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60vh;

	.u-empty {
		height: 60vh;
	}
}
</style>